<html>
<head>
    <title>game select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <link type="text/css" rel="Stylesheet" href="../css/game-select.css"/>
    <link type="text/css" rel="Stylesheet" href="../css/game01.css"/>
    <link type="text/css" rel="Stylesheet" href="../css/game02.css"/>
</head>
<body>
<div id="wrap">
    <div id="game-0">
        <div id="logo">
            <img src="../images/image_0014_TNT.png">
        </div>
        <div id="game-content">
            <div class="screen01">
                <div class="logo-recommend">
                    <img src="images/image_0045_Layer-4-copy.png">
                </div>
                <div class="image-nurse">
                    <img src="images/image_0023_Layer-2.png">
                </div>
                <div class="title-increase">Để tăng cường số<br>lượng và chất lượng sữa mẹ</div>
                <div class="title-descript_game2">Một số các bà mẹ thường nghĩ mình không đủ sữa nên cho trẻ ngừng bú
                    sữa
                    mẹ, tuy nhiên, trẻ không nhận đủ sữa thường do bé bú không đúng cách, rất hiếm các trường hợp các bà
                    mẹ không đủ sữa.
                </div>
                <a href="#">
                    <div class="button-continue"></div>
                </a>
            </div>

            <div class="screen02" style="display: none;">
                <div class="logo-recommend">
                    <img src="images/image_0045_Layer-4-copy.png">
                </div>
                <div class="image-nurse">
                    <img src="images/image_0023_Layer-2.png">
                </div>
                <div class="title-rule">luật chơi:<br>
                    chọn <span style="color: #2694d3;">2</span> câu trả lời đúng<br>
                    trong <span style="color: #2694d3;">4</span> sự lựa chọn<br>
                    cho mỗi câu hỏi
                </div>
                <a href="#">
                    <div class="button-continue"></div>
                </a>
            </div>

            <div class="screen03" style="display: none;">
                <a href="#">
                    <div class="button-continue" style="display: none;"></div>
                </a>
            </div>

            <div class="screen05" style="display: none;">
                <div class="logo-recommend">
                    <img src="images/image_0045_Layer-4-copy.png">
                </div>
                <div class="image-nurse">
                    <img src="images/image_0023_Layer-2.png">
                </div>

                <a href="#">
                    <div class="button-end"></div>
                </a>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var stepQuestion = 0;
        var count = 0;
        var buttonStatus = "continue";
        var currentQuestion = game02[stepQuestion];
        function loadQuestion(_currentQuestion)
        {
            $(".wrap-content").remove();
            $(".screen03").append('<div class="wrap-content">' +
                    '<div class="main-title">' + _currentQuestion.topic + '</div>' +
                    '<div id="sign-select">' + _currentQuestion.question + '</div>' +
                    '<ul id="list-question">' +
                    '<li>' +
                    '<div class="question-item item-check-true">' +
                    '<div class="left">' +
                    '<div class="item none-check"></div>' +
                    '</div>' +
                    '<div class="right">' + _currentQuestion.answer1 +'</div>' +
                    '</div>' +
                    '</li>' +
                    '<li>' +
                    '<div class="question-item">' +
                    '<div class="left">' +
                    '<div class="item none-check"></div>' +
                    '</div>' +
                    '<div class="right">' + _currentQuestion.answer2 + '</div>' +
                    '</div>' +
                    '</li>' +
                    '<li>' +
                    '<div class="question-item">' +
                    '<div class="left">' +
                    '<div class="item none-check"></div>' +
                    '</div>' +
                    '<div class="right">' + _currentQuestion.answer3 + '</div>' +
                    '</div>' +
                    '</li>' +
                    '<li>' +
                    '<div class="question-item">' +
                    '<div class="left">' +
                    '<div class="item none-check"></div>' +
                    '</div>' +
                    '<div class="right">' + _currentQuestion.answer4 + '</div>' +
                    '</div>' +
                    '</li>' +
                    '</ul>' +
                    '</div>'
            )
            canCheck(true);
            $(".left div").each(function(index, _item){
                $(_item).addClass("focus");
            });
            $(".button-continue", ".screen03").css('display', 'none');
        }

        function loadScreen05(_count)
        {
            $(".title-increase, .title-descript_game2", ".screen05"). remove();
            if(_count == game02.length)
            {
                $(".screen05").append('<div class="title-increase">chúc mừng,<br>' +
                        'bạn đã đạt ' + _count + ' trên ' + game02.length +'</div>' +
                        '<div class="title-descript_game2">Trong quá trình cho con bú, mẹ nên uống 2 ly sữa Similac mom để đảm bảo cung cấp đầy đủ dưỡng chất để duy trì chất lượng và số lượng sữa dồi dào</div>'
                );
            }
            else
            {
                $(".screen05").append('<div class="title-increase">Rất tiếc,<br>' +
                        'bạn chỉ đạt ' + _count + ' trên ' + game02.length +'</div>' +
                        '<div class="title-descript_game2">Trong quá trình cho con bú, mẹ nên uống 2 ly sữa Similac mom để đảm bảo cung cấp đầy đủ dưỡng chất để duy trì chất lượng và số lượng sữa dồi dào</div>'
                );
            }

        }

        function canCheck(_value)
        {
            if(_value){
                $(".left div").click(function () {
                    if ($(this).hasClass("none-check")) {
                        $(this).removeClass("none-check");
                        $(this).addClass("checked");
                    }
                    else {
                        $(this).removeClass("checked");
                        $(this).addClass("none-check");
                    }
                    $(".button-continue", ".screen03").css('display', 'block');
                });
            }
        }

        function enableControl(control, bool)
        {
            if(bool){
                $(control).css('display', 'block');
            }
            else
            {
                $(control).css('display', 'none');
            }
        }

        $(document).ready(function () {
//            loadQuestion(currentQuestion);
            $(".button-continue", ".screen01").click(function () {
                $(".screen02").css('display', 'block');
                $(".screen01").css('display', 'none');
            });

            $(".button-continue", ".screen02").click(function () {
                loadQuestion(currentQuestion);
                $(".screen03").css('display', 'block');
                $(".screen02").css('display', 'none');
            });




            $(".button-continue", ".screen03").click(function () {
                if(buttonStatus == 'continue'){
                    var checkSelect = 0;
                    $(".left div").each(function(index, _item){
                        if($(_item).hasClass("checked")){
                            checkSelect++;
                        }
                        $(_item).removeClass("focus");
                    });
                    if(checkSelect == 2){
                        var countTrueAnswer = 0;
                        $(".right").each(function(index, _item){
                            var item = $(_item);
                            if(currentQuestion.result1 == index + 1 || currentQuestion.result2 == index + 1)
                            {
                                if(item.height() <= 45)
                                {
                                    item.addClass("true");
                                }
                                else{
                                    item.addClass("true-long");
                                }
                            }
                        });

                        $(".left div").each(function(index, _item){
                            var item = $(_item);
                            if(item.hasClass("checked"))
                            {
                                if(currentQuestion.result1 != index + 1 && currentQuestion.result2 != index + 1)
                                {
                                    item.removeClass("checked");
                                    item.addClass("false");
                                    $(".right").each(function(index1, _item1){
                                        if(index == index1)
                                            $(this).addClass("false-background");
                                    });
                                }
                                else
                                {
                                    countTrueAnswer++;
                                }
                            }
                        });

                        if(countTrueAnswer == 2){
                            count++;
                        }

                    }
                    else{
                        alert("Hãy chọn 2 đáp án");
                        return;
                    }

                    canCheck(true);

                    buttonStatus = "newQuestion";

                }
                else
                {
                    if(buttonStatus == 'newQuestion')
                    {
                        stepQuestion++;
                        if(stepQuestion < game02.length){
                            currentQuestion = game02[stepQuestion];
                            loadQuestion(currentQuestion);
                            buttonStatus = "continue";
                        }
                        else{
                            loadScreen05(count);
                            $(".screen05").css('display', 'block');
                            $(".screen03").css('display', 'none');
                        }
                    }
                }
            });


            $(".button-end", ".screen05").click(function(){
                stepQuestion = 0;
                count = 0;
                buttonStatus = "continue";
                currentQuestion = game02[stepQuestion];
                loadQuestion(currentQuestion);
                $(".screen01").show();
                $(".screen02").hide();
                $(".screen03").hide();
                $(".screen05").hide();
            });
        });
    </script>

    <div id="footer-banner">
        <a href="../index.html"><img class="home-icon" src="../images/home_button.png"></a>
        <a href="#"><img class="abbott-icon" src="../images/image_0001_Abbott-logo.png"></a>
        <img src="../images/image_0002_Shape-8.png">
    </div>
</div>
</div>
</body>
</html>